<template>
  <div id="paramsChart" style="width:100%;height:150px"></div>
</template>
<script>
//接口
import {
  findAlarmTrendAnalysis,
} from "@/api/schedule/gisHydrant/index"
export default {
  name: "paramsChart",
  data () {
    return {

    };
  },
  created () {
  },
  mounted () {
    this.findTrendAnalysis()
  },
  methods: {
    //获取本月报警趋势
    findTrendAnalysis () {
      let obj = {}
      findAlarmTrendAnalysis(obj).then
        (response => {
          let data = response.data
          let xData = []
          let yData = []
          data.map(item => {
            xData.push(item.monthDay)
            yData.push(item.alertCount)
          })
          this.initCharts(xData, yData)

        }).catch(error => {
        });
    },
    initCharts (xData, yData) {
      let myCharts = this.$echarts.init(document.getElementById('paramsChart'));
      let option = {
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          y: 15,
          y2: 30,
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            color: ["#0B9AC3"],
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#F0F9FC'    // 0% 处的颜色
                }, {
                  offset: 1, color: '#F0F9FC' //   100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#paramsChart {
  z-index: 999;
  padding-left: 25px;
}
</style>